<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入当前应用的static/css目录下的style.css文件-->
<!--    {CSS href="__ADDONSTATIC__/css/main.css" /}-->
    {js href='__STATIC__/layui/css/layui.css' /}
    {js href='__STATIC__/jquery/jquery-1.11.0.min.js' /}
    {js href='__STATIC__/layui/layui.all.js' /}
</head>
<style type="text/css">
    .main{width: 98%;margin: 0 auto;}
    .edit{padding: 5px 10px;border: 1px solid #ccc;border-radius: 50px; cursor: pointer;}
    .edit-warm{color: orange;border: 1px solid orange;}
    .imgs{width: 100%;}
    .imgs img{width: 100%;}
    .ss{padding: 9px 10px;margin-left: 20px;}
</style>
<body>
<div class="main">
    <div class="layui-row" style="width: 100%">
        <div class="layui-col-sm1">
            <button type="button" class="layui-btn layui-border-green" onclick=getUrl("{:urlAddons('caipiao/Index/add')}")>添加内容</button>
        </div>
        <div class="layui-col-sm7">
            <select onchange="selectStatus(this)" class="ss" name="city" lay-verify="">
                <option value="-1">选中奖状态</option>
                <option value="0">待处理</option>
                <option value="1">中奖</option>
                <option value="2">未中奖</option>
                <option value="3">错误</option>
                <option value="4">已兑奖</option>
            </select>
        </div>
        <div class="layui-col-sm3">
            <input id="search" type="search" placeholder="请输入完整openid" class="layui-input">
        </div>
        <div class="layui-col-sm1">
            <button onclick="search()" class="layui-btn layui-border-green layui-layout-right">搜索</button>
        </div>
    </div>
    <table class="layui-table" id="demo" lay-filter="test"></table>
</div>
<script>
    let cPage = 1
    let cLimit = 10
    layui.use(['table','laypage'], function(){
        var table = layui.table;

        //第一个实例
        mainTable = table.render({
            elem: '#demo'
            ,url: '{$url}' //数据接口
            ,page: true //开启分页
            ,limits: [10,20,50]
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'img_url', title: '彩票图片', width:90, templet:'#imgurl'}
                ,{field: 'relname', title: '昵称'}
                ,{field: 'balance',title: '中奖金额'}
                ,{field: 'mobile', title: '电话'}
                ,{field: 'status', title: '中奖状态'}
                ,{field: 'create_time', title: '创建时间'}
                ,{field: 'edit',title: '操作',templet: '#edit'}
            ]],
            done:(res, curr, count)=>{
                cPage = curr
                cLimit = res.limit
            }
        });

    });
    function getUrl(url){
        location.href=url
    }
    function del(id){
        layer.confirm('你确定要删除', {icon: 3, title:'提示'}, function(index){
            $.ajax({
                contentType: 'application/json',
                type: 'DELETE',
                url:"{:urlAddons('caipiao/Index/delete')}",
                data:JSON.stringify({id:id}),
                dataType:"json",
                success:res=>{
                    if(res.code===0){
                        layer.msg(res.msg,{icon: 6},()=>{
                            mainTable.reload()
                        })
                    }else{
                        layer.msg(res.msg)
                    }
                }
            })
            layer.close(index);
        });
    }
    function edit(id){
        location.href=`{:urlAddons('caipiao/Index/edit')}?id=${id}&page=${cPage}&limit=${cLimit}`
    }
    function showImg(e){
        layer.open({
            type:1,
            shade:[0.1,'#ffffff'],
            shadeClose:true,
            content:`<div class="imgs"><img src="${e.src}"></div>`
        })
    }
    function search(){
        let keyword = $('#search').val()
        mainTable.reload({
            url:'{$url}',
            where:{
                keyword:keyword
            }
        })
    }
    function selectStatus(e){
        let v = e.options[e.selectedIndex].value
        mainTable.reload({
            url:'{$url}',
            where:{
                status:v
            }
        })
    }
    function cash(id){
        layer.confirm('你确定要提现', {icon: 6, title:'提示'},index =>{
            $.ajax({
                contentType: 'application/json',
                type: 'POST',
                url:"{:urlAddons('caipiao/Index/cash')}",
                data:JSON.stringify({id:id}),
                dataType:"json",
                success:res=>{
                    if(res.code === 0){
                        layer.msg(res.msg,{icon: 6},()=>{
                            mainTable.reload()
                        })
                    }else{
                        layer.msg(res.msg,{icon: 2})
                    }
                }
            })
            layer.close(index);
        })
    }
</script>
<script type="text/html" id="imgurl">
    <div><img onclick="showImg(this)" src="{{ d.img_url }}" style="width: 30px; height: 30px;"></div>
</script>
<script type="text/html" id="edit">
    {{# if(d.cash_type == 0) { }}
    <span class="edit" onclick="edit('{{d.id}}')">编辑</span>
    {{# } }}
    <span class="edit edit-warm" onclick="del('{{d.id}}')">删除</span>
    {{# if(d.status == '中奖' && d.cash_type == 0){ }}
    <span class="edit edit-warm" onclick="cash('{{d.id}}')">提现</span>
    {{# } }}
</script>
</body>
</html>
